<!--development  container-->
<template>
  <div>
    <div class="search-box development-box">
      <el-form :inline="true" label-position="top" :model="searchForm" size="mini" ref="ruleForm"  class="demo-ruleForm main-search-box">
        <el-form-item prop="region" :label="$t('m.Region')" >
          <el-select style="width: 200px" v-model="searchForm.RegionID" clearable placeholder="" @change="getTownships">
            <el-option v-for="rg in regions" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="region" :label="$t('m.Township')" >
          <el-select style="width: 200px" multiple collapse-tags v-model="searchForm.townshipId" placeholder="">
            <el-option v-for="ts in townships" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="region" :label="$t('m.PropertyType')" >
          <el-select style="width: 200px" v-model="searchForm.propertyTypeId" clearable placeholder="" @change="getSubType">
            <el-option v-for="rg in propertyType" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="region" :label="$t('m.SubType')">
          <el-select style="width: 200px" multiple collapse-tags v-model="searchForm.propertySubTypeId" placeholder="">
            <el-option v-for="ts in propertySubType" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
          </el-select>
        </el-form-item>

        <el-row>
          <el-col>
            <el-form-item prop="region" :label="$t('m.PriceMinLks')" style="width: 200px;margin-right: 0">
              <el-input v-model="searchForm.priceMin" placeholder=""></el-input>
            </el-form-item>
            <el-form-item style="margin-top: 25px;margin-right: 0px;"><span>-</span></el-form-item>
            <el-form-item prop="region" :label="$t('m.PriceMaxLks')" style="width: 200px">
              <el-input v-model="searchForm.priceMax" placeholder=""></el-input>
            </el-form-item>

            <el-form-item style="margin-top: 24px;margin-left: 1px;">
              <el-button style="color: #606266!important;" @click="toggleShowMore">{{$t('m.More')}}<i v-if="!showMore" class="el-icon-arrow-down"></i><i
                v-if="showMore"
                class="el-icon-arrow-up"></i>
              </el-button>
              <el-button type="primary" @click="getList(1)">{{$t('m.Search')}}</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
     <div class="line-form" v-if="showMore"></div>
      <!--more-->
      <el-form v-if="showMore" label-position="top" :inline="true" ref="form" :model="moreForm" label-width="120px" size="mini" class="more-box main-search-box">

        <el-form-item v-if="showOther" :label="$t('m.Totalbedrooms')">
          <el-select style="width: 200px" multiple collapse-tags v-model="moreForm.totalBedrooms" @change="onToggleAny($event, 'totalBedrooms')"
                     placeholder="">
            <el-option v-for="ts in totalBedroomsJson" :key="ts.value" :label="ts.text"
                       :value="ts.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="showOther" :label="$t('m.MasterBedroom')">
          <el-select style="width: 200px" v-model="moreForm.masterBedroom" placeholder="" @change="onToggleAnySingle($event, 'masterBedroom')">
            <el-option v-for="ts in masterBedroomJson" :key="ts.value" :label="ts.text"
                       :value="ts.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="showOther" :label="$t('m.Bathroom')">
          <el-select style="width: 200px" v-model="moreForm.Bathroom" placeholder="" @change="onToggleAnySingle($event, 'Bathroom')">
            <el-option v-for="ts in BathroomJson" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
          </el-select>
        </el-form-item>

            <el-row v-if="showOther">
              <el-form-item :label="$t('m.FloorsizeMinFeet')" style="width: 200px;margin-right: 0">
                <el-input v-model="moreForm.floorSizeList[0].minSize" placeholder=""></el-input>
              </el-form-item>
              <el-form-item style="margin-top: 25px;margin-right: 0px;"><span>-</span></el-form-item>
              <el-form-item :label="$t('m.FloorsizeMaxFeet')"  style="width: 200px">
                <el-input v-model="moreForm.floorSizeList[0].maxSize" placeholder=""></el-input>
              </el-form-item>
            </el-row>

            <el-form-item :label="$t('m.CompletionDate')">
              <el-select style="width: 200px" v-model="moreForm.CompletionDate" @change="onToggleAnySingle($event, 'CompletionDate')"
                         placeholder="">
                <el-option v-for="ts in CompletionDateJson" :key="ts.value" :label="ts.text"
                           :value="ts.value"></el-option>
              </el-select>
            </el-form-item>
      </el-form>
    </div>
    <div class="sort-box">
      <el-form  size="mini" ref="sortForm" label-position="top"  class="demo-ruleForm">
            <el-form-item prop="region" label="" style="margin-bottom: 0">
              <el-select style="width: 200px" v-model="sortForm" :placeholder="$t('m.Sort')" @change="getList">
                <el-option v-for="rg in buySortJson" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
              </el-select>
            </el-form-item>
      </el-form>
    </div>
    <div class="buyList">
      <el-table
        :data="tableData"
        :show-header="false"
        @row-click="goToDetail"
        style="width: 100%">
        <el-table-column
          label=""
          width="200">
          <template slot-scope="scope">
            <img :src="scope.row.photoUrl" class="rent-img" alt="" :onerror="defaultImg"/>
          </template>
        </el-table-column>
        <el-table-column
          label=""
          width="400">
          <template slot-scope="scope">
            <h3 class="list-info-title" v-if="scope.row.developmentName">{{translateUTZaw(scope.row.developmentName)}}</h3>
            <p>{{getPropertytype(scope.row.propertyTypeId)}}/{{getSubPropertytype(scope.row.propertySubTypeId)}}</p>
            <p>{{ scope.row.street?translateUTZaw(scope.row.street)+',' :''
              }}{{getTownshipId(scope.row.townshipId)}},{{getregionId(scope.row.regionId)}}</p>
            <p>{{getConstructionStatus(scope.row.constructionStatus)}}{{scope.row.constructionStatusOtherDesc ? ','+translateUTZaw(scope.row.constructionStatusOtherDesc):''}}</p>
            <p v-if="scope.row.completionDate">{{dateFormat(scope.row.completionDate)}}</p>
            <p class="price-box-usd"><span v-if="getPrice(scope.row.developmentsUnitsList, scope.row.currencyId)">{{$t('m.Pricefrom')}}:</span><span class="development-price">{{getPrice(scope.row.developmentsUnitsList, scope.row.currencyId)}}</span></p>
          </template>
        </el-table-column>
        <el-table-column
          label=""
          width="">
          <template slot-scope="scope">
            <!--<h3 class="rent-price" v-if="scope.row.mmkPrice&&!scope.row.usdPrice">{{ regexNum(scope.row.mmkPrice) }} Lks</h3>-->
            <!--<h3 class="rent-price" v-if="scope.row.mmkPrice&&scope.row.usdPrice">{{ regexNum(scope.row.usdPrice)-->
              <!--}} USD ({{regexNum(scope.row.mmkPrice)+' Lks'}})</h3>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="page-list-box">
        <!--<el-pagination-->
        <!--background-->
        <!--layout="prev, pager, next"-->
        <!--:total="1000"-->
        <!--:page-size="20"-->
        <!--@current-change="changePage">-->
        <!--</el-pagination>-->
        <el-pagination
          background
          @current-change="handleChangePage"
          :current-page="pageData.pageNum"
          :page-count="pageInfo.totalPages"
          layout="prev, pager, next">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  // 英文json
  import propertyType from '@/json/propertyType'
  import propertySubType from '@/json/propertySubType'
  import regions from '@/json/region'
  import townships from '@/json/township'
  import buySort from '@/json/newDevSort'

  // 缅甸文json
  import mm_propertyType from '@/mmJson/propertyType'
  import mm_propertySubType from '@/mmJson/propertySubType'
  import mm_regions from '@/mmJson/region'
  import mm_townships from '@/mmJson/township'
  import mm_buySort from '@/mmJson/newDevSort'


  import {searchDevelopmentList} from '../../api/zxy_api'
  import qs from 'qs'

  export default {
    name: 'developmentList',
    data() {
      return {
        // 搜索子段
        townships: [],
        propertySubType: [],
        floorLevel: [
          {"text": "Any", "value": 'Any'},
          {"text": "Ground floor", "value": 100},
          {"text": "Ground floor with Mezzanine", "value": 103},
          {"text": "Mezzanine", "value": 101},
          {"text": "1-2", "value": 1},
          {"text": "3-4", "value": 3},
          {"text": "5+", "value": 5},
          {"text": "Penthouse", "value": 102},
        ],
        Furnishing: [
          {"text": "Any", "value": 'Any'},
          {"text": "Unfurnished", "value": 0},
          {"text": "Partially", "value": 1},
          {"text": "Fully", "value": 2},
        ],
        BuildingAge: [
          {"text": "Any", "value": 'Any'},
          {"text": "<5", "value": 0},
          {"text": "5-10", "value": 1},
          {"text": "10-20", "value": 2},
          {"text": ">20", "value": 3},
        ],
        Facing: [
          {"text": "Any", "value": 'Any'},
          {"text": "East", "value": 0},
          {"text": "South East", "value": 1},
          {"text": "South", "value": 2},
          {"text": "South West", "value": 3},
          {"text": "West", "value": 4},
          {"text": "North West", "value": 5},
          {"text": "North", "value": 6},
          {"text": "North East", "value": 7},
        ],
        Source: [
          {"text": "Any", "value": 'Any'},
          {"text": "Agent", "value": 0},
          {"text": "Owner", "value": 1},
        ],
        searchForm: {
          RegionID: 2,
          townshipId: [],
          propertyTypeId: '',
          propertySubTypeId: [],
          priceMin: '',
          priceMax: '',
        },
        moreForm: {
          totalBedrooms: [],
          masterBedroom: '',
          Bathroom: '',
          floorSizeList: [
            {minSize: '', maxSize: ''}
          ],
          CompletionDate: ''
        },
        pageData: {
          pageNum: 1,
          pageSize: 20,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        showMore: false,
        showOther: true,
        // 列表数据
        defaultImg: 'this.src="' + require('../../../static/default.png') + '"',
        tableData: [],
        sortForm: '',
      }
    },
    computed: {
      buySortJson(){
        if (this.$store.state.localLang == 'MM') {
          return mm_buySort
        } else {
          return buySort
        }
      },
      propertyType() {
        if (this.$store.state.localLang == 'MM') {
          return mm_propertyType
        } else {
          return propertyType
        }
      },
      regions() {
        if (this.$store.state.localLang == 'MM') {
          return mm_regions
        } else {
          return regions
        }
      },
      constructionStatus(){
        if(this.$store.state.localLang == 'MM'){
          return  [
            {'value': 1, 'text': 'တည္ေဆာက္ျခင္းမရွိေသး'},
            {'value': 2, 'text': 'ေဆာက္လုပ္ဆဲ'},
            {'value': 3, 'text': 'ေဆာက္လုပ္ျပီးစီး'}
          ]
        }else {
          return  [
            {'value': 1, 'text': 'Not yet started'},
            {'value': 2, 'text': 'Building'},
            {'value': 3, 'text': 'Finished'}
          ]
        }
      },
      CompletionDateJson(){
        if(this.$store.state.localLang == 'MM'){
          return  [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "ယခုလ", "value": 1},
            {"text": "၃ လ အတြင္း", "value": 2},
            {"text": "၆ လအတြင္း", "value": 3},
            {"text": "လြန္ခဲ့ေသာ ၃ လက ျပီးစီးခဲ့ေသာ", "value": 4},
            {"text": "လြန္ခဲ့ေသာ ၆ လ က ျပီးစီးခဲ့ေသာ", "value": 5},
            {"text": "ေဆာက္လုပ္ျပီးစီးျပီးေသာ", "value": 6},
          ]
        }else {
          return  [
            {"text": "Any", "value": 'Any'},
            {"text": "This month", "value": 1},
            {"text": "Within 3 months", "value": 2},
            {"text": "Within 6 months", "value": 3},
            {"text": "Completed last 3 months", "value": 4},
            {"text": "Completed last 6 months", "value": 5},
            {"text": "Completed", "value": 6},
          ]
        }
      },
      totalBedroomsJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "1", "value": 1},
            {"text": "2", "value": 2},
            {"text": "3", "value": 3},
            {"text": "4", "value": 4},
            {"text": "5+", "value": 5},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "1", "value": 1},
            {"text": "2", "value": 2},
            {"text": "3", "value": 3},
            {"text": "4", "value": 4},
            {"text": "5+", "value": 5},
          ]
        }
      },
      masterBedroomJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        }
      },
      BathroomJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        }
      },
    },
    methods: {
      formatDate(date){
          var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();

          if (month.length < 2) month = '0' + month;
          if (day.length < 2) day = '0' + day;

          return [year, month].join('-');
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleChangePage(val) {
        this.pageData.pageNum = val
        this.getList()
      },
      getTownships(regionId) {
        let town = []
        this.townships = []
        this.searchForm.townshipId = []

        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        } else {
          for (var t of townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        }
        this.townships = town
      },
      getSubType(type) {
        // 首先处理部分dom 显示隐藏

        // 初始化
        // var arrShow = [
        //   {"value": 1, "text": "Apartment", "showland": false},
        //   {"value": 2, "text": "Condo", "showland": false},
        //   {"value": 3, "text": "House", "showland": true},
        //   {"value": 4, "text": "Land", "showland": true, "showOther": true},
        //   {"value": 8, "text": "Commercial", "showland": true}
        // ]

        if (this.searchForm.propertyTypeId == 1 || this.searchForm.propertyTypeId == 2) {
          this.landSizeShow = false
        } else {
          this.landSizeShow = true
        }

        if (this.searchForm.propertyTypeId == 4) {
          this.showOther = false
        } else {
          this.showOther = true
        }

        // 将more中数据初始化
        this.moreForm = {
          totalBedrooms: [],
          masterBedroom: '',
          Bathroom: '',
          floorSizeList: [
            {minSize: '', maxSize: ''}
          ],
          CompletionDate: ''
        };

        let subType = []
        this.propertySubType = []
        this.searchForm.propertySubTypeId = []

        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        } else {
          for (var t of propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        }
        this.propertySubType = subType
      },
      toggleShowMore() {
        this.showMore = !this.showMore
      },
      getList(pageNum) {

        if(pageNum == 1){
          this.pageData.pageNum = 1;
        }

        let searchForm = {};

        // 搜索子段处理
        if(this.searchForm.RegionID){
          searchForm.regionId = this.searchForm.RegionID
        }
        if(this.searchForm.propertyTypeId){
          searchForm.propertyTypeId = this.searchForm.propertyTypeId
        }
        if (this.searchForm.townshipId.length > 0) {
          searchForm.townshipIdList = this.searchForm.townshipId.join(',')
        }
        if (this.searchForm.propertySubTypeId.length > 0) {
          searchForm.propertySubTypeIdList = this.searchForm.propertySubTypeId.join(',')
        }

        // minPrice
        if(this.searchForm.priceMin){
          searchForm.minUnitPrice = this.searchForm.priceMin
        }
        // maxPrice
        if(this.searchForm.priceMax){
          searchForm.maxUnitPrice = this.searchForm.priceMax
        }

        // more搜索子段处理

        // Total bedrooms
        if (this.moreForm.totalBedrooms.length > 0 && (!(this.moreForm.totalBedrooms[0] == 'Any'))) {
          let arr = [];
          for (let i = 0; i < this.moreForm.totalBedrooms.length; i++) {
            if (this.moreForm.totalBedrooms[i] != '5') {
              arr.push(this.moreForm.totalBedrooms[i])
            }
          }
          searchForm.totalBedroomList = arr.join(',')
          for (let j = 0; j < this.moreForm.totalBedrooms.length; j++) {
            if (this.moreForm.totalBedrooms[j] == '5') {
              searchForm.minTotalBedroom = '5'
            }
          }
        }

        // Master Bedroom
        if (this.moreForm.masterBedroom && (this.moreForm.masterBedroom != 'Any')) {
          if (this.moreForm.masterBedroom == '0') {
            searchForm.masterBedroomList = this.moreForm.masterBedroom;
          } else {
            searchForm.minMasterBedroom = this.moreForm.masterBedroom;
          }
        }

        // Bathroom
        if (this.moreForm.Bathroom && (this.moreForm.Bathroom != 'Any')) {
          if (this.moreForm.Bathroom == '0') {
            searchForm.bathroomList = this.moreForm.Bathroom;
          } else {
            searchForm.minBathroom = this.moreForm.Bathroom;
          }
        }

        // Floor size
        if (this.moreForm.floorSizeList[0].minSize || this.moreForm.floorSizeList[0].maxSize) {
          searchForm['floorSizeList[0].minSize'] = this.moreForm.floorSizeList[0].minSize;
          searchForm['floorSizeList[0].maxSize'] = this.moreForm.floorSizeList[0].maxSize;
        }

        // CompletionDate
        if (this.moreForm.CompletionDate && (this.moreForm.CompletionDate != 'Any')) {
          let date = new Date();
          if(this.moreForm.CompletionDate == 1){
            searchForm.minCompletionDate =  this.formatDate(date.setMonth(date.getMonth()))
            searchForm.maxCompletionDate =  this.formatDate(date.setMonth(date.getMonth()))
          }else if(this.moreForm.CompletionDate == 2){
            searchForm.minCompletionDate =  this.formatDate(date.setMonth(date.getMonth()))
            searchForm.maxCompletionDate =  this.formatDate( date.setMonth(date.getMonth() + 2))
          }else if(this.moreForm.CompletionDate == 3){
            searchForm.minCompletionDate =  this.formatDate(date.setMonth(date.getMonth()))
            searchForm.maxCompletionDate =  this.formatDate( date.setMonth(date.getMonth() + 5))
          }else if(this.moreForm.CompletionDate == 4){
            searchForm.minCompletionDate =  this.formatDate(date.setMonth(date.getMonth()))
            searchForm.maxCompletionDate =  this.formatDate( date.setMonth(date.getMonth() - 2))
          }else if(this.moreForm.CompletionDate == 5){
            searchForm.minCompletionDate =  this.formatDate(date.setMonth(date.getMonth()))
            searchForm.maxCompletionDate =  this.formatDate( date.setMonth(date.getMonth() - 5))
          }else if(this.moreForm.CompletionDate == 6){
            searchForm.minCompletionDate =  this.formatDate(date.setMonth(date.getMonth()))
          }
        }

        // sort
        if(this.sortForm){
          searchForm.sort = this.sortForm
        }


        searchDevelopmentList(Object.assign(searchForm, this.pageData)).then((res) => {
          this.tableData = res.data.data.object.list || []

          // 分页信息配置
          this.pageInfo.totalPages = res.data.data.object.pages
          this.pageInfo.totalCount = res.data.data.object.total
          window.scrollTo(0,0)
        }).catch((e) => {
          console.log(e)
        })
      },
      getPropertytype(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_propertyType) {
            if (id == t.value) {
              return t.text
            }
          }
        } else {
          for (var t of propertyType) {
            if (id == t.value) {
              return t.text
            }
          }
        }
      },
      getSubPropertytype(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_propertySubType) {
            if (id == t.value) {
              return t.text
            }
          }
        } else {
          for (var t of propertySubType) {
            if (id == t.value) {
              return t.text
            }
          }
        }
      },
      getTownshipId(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (id == t.value) {
              return t.text
            }
          }
        } else {
          for (var t of townships) {
            if (id == t.value) {
              return t.text
            }
          }
        }
      },
      getregionId(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_regions) {
            if (id == t.value) {
              return t.text
            }
          }
        } else {
          for (var t of regions) {
            if (id == t.value) {
              return t.text
            }
          }
        }
      },
      getConstructionStatus(id) {
        if (this.$store.state.localLang == 'MM') {
          let arr = [
            {'value': 1, 'text': 'တည္ေဆာက္ျခင္းမရွိပါ'},
            {'value': 2, 'text': 'ေဆာက္လုပ္ဆဲ'},
            {'value': 3, 'text': 'ေဆာက္လုပ္ျပီးစီး'}
          ]
          for (var t of arr) {
            if (id == t.value) {
              return t.text
            }
          }
        }else {
          let arr = [
            {'value': 1, 'text': 'Not yet started'},
            {'value': 2, 'text': 'Building'},
            {'value': 3, 'text': 'Finished'}
          ]
          for (var t of arr) {
            if (id == t.value) {
              return t.text
            }
          }
        }
      },
      onTotalBedroomsChange(val) {
        for (var i = 0; i < this.moreForm.totalBedrooms.length; i++) {
          if (this.moreForm.totalBedrooms[i] == 'Any') {
            if (this.moreForm.totalBedrooms[0] == 'Any' && val.length > 1) {
              this.moreForm.totalBedrooms.shift()
            } else {
              this.moreForm.totalBedrooms = ['Any']
            }
          }
        }
      },
      onToggleAny(val, name) {
        let arr = this.moreForm[name] || [];
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == 'Any') {
            if (arr[0] == 'Any' && val.length > 1) {
              this.moreForm[name].shift()
            } else {
              this.moreForm[name] = []
            }
          }
        }
      },
      onToggleAnySingle(val, name){
        if(val == 'Any'){
          this.moreForm[name] = ''
        }
      },
      goToDetail(row, event, column) {
        const {href} = this.$router.resolve({
          name: 'foo',
          path: '/devDetails',
          query: {
            id: row.developmentId
          }
        })
        window.open(href, '_blank');
      },
      regexNum (v,len,split) {
        split = split || ',', len = Math.abs((+len) % 20 || 2)
        v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
        var price =  v.replace(/\d+/, function (v) {
            var lit = v.length % 3 == 0
            var index = lit ? v.length - 3 : -1
            return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
              return k + ((l == index && lit) ? '' : split)
            }).split('').reverse().join('')
          }
        )

        if(price.match(".00")){
          return price.replace('.00',"")
        }else if(price.substr(price.length-1, 1) == 0){
          return price.substring(0, price.length-1)
        }
        else {
          return price
        }
      },
      dateFormat (value, str) {
        if(!value){
          return ''
        }
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        if (str == 'listedDate') {
          var t = d + '-' + m + '-' + Y + '  ' + H + ':' + i + ':' + s
          return t
        } else {
          var ts = m + '-' + Y
          return ts
        }
      },
      getPrice(UnitsList,currencyId){
        // 1缅甸 3美元
        let minPrice = ''
        let minLksPrice = ''
        if(UnitsList&&UnitsList.length>0){
          let minPriceArr = [];
          let minLksPriceArr = [];
          for(let i=0;i<UnitsList.length;i++){
            let arr = [];
            let arrLks = [];
            if(UnitsList[i].price){
              arr.push(UnitsList[i].price)
            }
            if(UnitsList[i].price2){
              arr.push(UnitsList[i].price2)
            }
            if(UnitsList[i].price3){
              arr.push(UnitsList[i].price3)
            }
            if(arr.length>0){ // 3个price 中的最小值
              minPriceArr.push(Math.min(...arr))
            }

            if(currencyId == 3){
              if(UnitsList[i].lksPrice){
                arrLks.push(UnitsList[i].lksPrice)
              }
              if(UnitsList[i].lksPrice2){
                arrLks.push(UnitsList[i].lksPrice2)
              }
              if(UnitsList[i].lksPrice3){
                arrLks.push(UnitsList[i].lksPrice3)
              }
              if(arrLks.length>0){ // 3个Lks price 中的最小值
                minLksPriceArr.push(Math.min(...arrLks))
              }
            }
          }
          if(minPriceArr.length>0){ // 整个unit list中的最小值 只有缅甸元
            minPrice = Math.min(...minPriceArr)
          }
          if(minLksPriceArr.length>0){ // 整个unit list中的最小值 美元和缅甸元都有
            minLksPrice = Math.min(...minLksPriceArr)
          }
        }
        if(currencyId == 1 && minPrice){
          return this.regexNum(minPrice) + ' Lks'
        }else if(minPrice && currencyId == 3){
          return this.regexNum(minPrice) + ' USD'+ '(' + this.regexNum(minLksPrice) + ' Lks)'
        }else {
          return ''
        }

      },
      translateUTZaw(str){
        if (!str) return '';
        return this.$translateLang(str, 'unicodeTozawgyi')
      },
    },
    mounted() {
      this.searchForm.RegionID = Number(this.$route.query.regionId) || 2;
      if (this.$route.query.townshipId && this.$route.query.townshipId.length > 0) {
        if (this.$route.query.townshipId.length > 0) {
          this.getTownships(this.searchForm.RegionID)
          if (this.$store.state.localLang == 'MM') {
            for (var t of mm_townships) {
              for (var s of this.$route.query.townshipId) {
                if (t.value == s) {
                  this.searchForm.townshipId.push(t.value)
                }
              }
            }
          } else {
            for (var t of townships) {
              for (var s of this.$route.query.townshipId) {
                if (t.value == s) {
                  this.searchForm.townshipId.push(t.value)
                }
              }
            }
          }
        }
      }else{
        this.getTownships(this.searchForm.RegionID)
        if (this.$store.state.localLang == 'MM') {
            for (var t of mm_townships) {
                if (t.value == this.searchForm.RegionID) {
                  this.searchForm.townshipId.push(t.value)
                }
            }
          } else {
            for (var t of townships) {
                if (t.value == this.searchForm.RegionID) {
                  this.searchForm.townshipId.push(t.value)
                }
            }
          }
      }

      this.searchForm.propertyTypeId = Number(this.$route.query.propertyTypeId) || '';

      // this.searchForm.propertySubTypeId = this.$route.query.propertySubTypeId || []
      if (this.$route.query.propertySubTypeId) {
        if (this.$route.query.propertySubTypeId.length > 0) {
          this.getSubType(this.searchForm.propertyTypeId)
          if (this.$store.state.localLang == 'MM') {
            for (var t of mm_propertySubType) {
              for (var s of this.$route.query.propertySubTypeId) {
                if (t.value == s) {
                  this.searchForm.propertySubTypeId.push(t.value)
                }
              }
            }
          } else {
            for (var t of propertySubType) {
              for (var s of this.$route.query.propertySubTypeId) {
                if (t.value == s) {
                  this.searchForm.propertySubTypeId.push(t.value)
                }
              }
            }
          }
        }
      }

      this.searchForm.priceMin = this.$route.query.minPrice || ''
      this.searchForm.priceMax = this.$route.query.MaxPrice || ''
      this.getList()


    }
  }
</script>
<style>

  .search-box .el-button--primary{
    background-color: #f60!important;
    border-color: #f60!important;
  }

  .search-box .el-form-item {
    margin-bottom: 10px !important;
  }

  .search-box {
    position: relative;
    padding-top: 20px;
    border-bottom: 1px solid #eee;
  }

  .serch-wrap {
    /*height: 100px;*/
    width: 100%;
    margin: 0;
  }

  .more-box {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .buyList {
    width: 1218px;
    margin: 0 auto;
  }

  .buyList .el-table__row {
    cursor: pointer;
  }

  .buyList .el-table__row img {
    display: block;
    width: 180px;
    height: 135px;
  }

  .buyList .el-table__row p {
    /*margin: 22px 0;*/
  }

  .list-info-title {
    margin: 0;
  }

  .rent-price {
    color: rgb(255, 0, 0);
    height: 130px;
    position: relative;
    top: 8px;
    left: 0;
  }

  .page-list-box {
    text-align: center;
    margin: 30px 0;
  }

  .sort-box {
    padding: 20px 0;
    width: 1200px;
    margin: 0 auto;
  }

  .line-form {
    border-top: 1px solid #eee;
  }

  .main-search-box {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 10px;
  }

  .development-price {
    margin-left: 80px;
    color: rgb(255, 0, 0);
    font-size: 18px;
    font-weight: bold;
  }

</style>
